<template>
  <div class="studentDetail">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <!-- <el-button
          type="success"
          plain
          icon="Edit"
          :disabled="single"
          @click="handleUpdate"
          >修改</el-button
        > -->
      </el-col>

      <el-col :span="1.5">
        <el-button type="warning" plain @click="handleExport"> <span style="margin-right: 6px;" class="iconfont icon-topsales"></span>导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" plain icon="Close" @click="handleClose">关闭</el-button>
      </el-col>
    </el-row>

    <div v-if="base_info" class="studentInfo">
      <div class="header">
        <el-row>
          <el-col :span="8">
            <div class="avatar">
              <el-avatar :size="150" :src="avatar || defaultAvatar" />
              <div class="right">
                <h2 v-if=" base_info.name">{{ base_info.name }}</h2>
                <h2 v-else>暂无姓名</h2>
                <p>班级: <b>{{ base_info.class_name }}</b></p>
                <p>学号: <b>{{ base_info.school_code }}</b></p>
              </div>
            </div>
          </el-col>

          <el-col :span="8">
            <div class="info">
              <p>学院: <b>{{ base_info.college }}</b></p>
              <p>性别:
                <b>{{ base_info.gender }}</b>

              </p>
              <!-- <p>出生年月: <b>2000年10月1日</b></p> -->
            </div>
          </el-col>

          <el-col :span="8">
            <div class="info">
              <p>专业: <b>{{ base_info.major }}</b></p>

            </div>
          </el-col>
        </el-row>
      </div>

      <el-table :data="per_entity" id="tableData" style="width: 100%;" class="studentTable" overflow-x="auto">
        <el-table-column width="300px" align="center" prop="name" label="课程名" />
        <el-table-column width="300px" align="center" prop="create_time" label="上课时间" />
        <el-table-column width="300px" align="center" prop="names" label="任课老师" />
        <el-table-column align="center" prop="f_avg_fraction" width="300px" label="作业评分" />

        <el-table-column min-width="420px" align="center" prop="final_score" label="考试成绩" />
      </el-table>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import defaultAvatar from '@/assets/images/user-default.jpg'
import { stuDetail, stuTable } from "@/api/user";
import { _export_dangan } from "@/utils/excel_util";
import { _formatTimestamp } from "@/utils/common";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const single = ref(false);
const stuInfo = ref()
const avatar = ref()
const gender = ref()
// 个人档案实体
const per_entity = ref([
  {
    name: "zhangsan",
    create_time: "2020-12-10",
    names: "李四",
    f_avg_fraction: 88,
    final_score: 65
  }

]);

// [
// 	{
// 		"id": 18,
// 		"name": "demo8",
// 		"create_time": 1727337423963,
// 		"names": "王老师, 那英, 张华",
// 		"stat": [
// 			{
// 				"t": 0,
// 				"bk_id": "18",
// 				"create_id": "7244967773145800699",
// 				"count": "6",
// 				"avg_fraction": "145.00",
// 				"final_score": null,
// 				"had_fraction": 0
// 			},
//       {
// 				"t": 1,
// 				"bk_id": "18",
// 				"create_id": "7244967773145800699",
// 				"count": "1",
// 				"avg_fraction": "89.67",
// 				"final_score": null,
// 				"had_fraction": 0
// 			}
// 		]
// 	},
// 	{
// 		"id": 16,
// 		"name": "demo7",
// 		"create_time": 1727337239772,
// 		"names": "王老师, 那英, 张华",
// 		"stat": []
// 	}]
// js怎么将上面数组每一项对象中的stat数组中t=0中的avg_fraction和t=1中的final_score提取出来，
// 如果stat数组等于空，avg_fraction和final_score赋值为0转成下面数组结构


//   [
// 	{
// 		"id": 18,
// 		"name": "demo8",
// 		"create_time": 1727337423963,
// 		"names": "王老师, 那英, 张华",
//     "f_avg_fraction":"145",
//     "final_score":"89.67"
// 	},
// 	{
// 		"id": 16,
// 		"name": "demo7",
// 		"create_time": 1727337239772,
// 		"names": "王老师, 那英, 张华",
// 		"f_avg_fraction":"",
//     "final_score":""
// 	}]

const base_info = ref();
function convertRefToString(refObject) {
  const labelMap = {
    name: "名称",
    school: "学校",
    school_code: "学号",
    college: "学院",
    // birth: "出生日期",
    major: "专业",
    gender: "性别"
  };

  return Object.entries(refObject.value)
    .map(([key, value]) => `${labelMap[key] || key}：${value}`)
    .join(String.fromCharCode(10)); // 使用Excel的换行符
}


// 获取学生档案信息
const getStuDetail = () => {
  stuDetail(route.query.user_id).then((res) => {
    console.log(res);
    avatar.value = res.user.avatar
        let gender = res.user.gender === 0 ? "女" : res.user.gender === 1 ? "男" : ""

    base_info.value = {
      class_name:res.user.c_m_info[0].cla_name,
      name: res.user.nick_name,
      school: res.user.college?res.user.college:"无",
      school_code: res.user.school_code?res.user.school_code:"无",
      college: res.user.roles[0].parent_name,
      major: res.user.c_m_info.length > 0 ? res.user.c_m_info[0].marjor_name : "无",
      gender: gender?gender:""
    };

    // per_entity.value = res;
    // per_entity.value.forEach((item) => {
    //   item.create_time = _formatTimestamp(item.create_time);
    //   // item.stat.forEach(
    //   //   ({ t, avg_fraction, count, had_fraction, final_score }) => {
    //   //     if (t === 0) {
    //   //       item.f_avg_fraction = avg_fraction;
    //   //       item.f_count = count;
    //   //       item.f_had_fraction = had_fraction;
    //   //     } else {
    //   //       item.final_score = final_score;
    //   //     }
    //   //   }
    //   // );
    // });
  });
};

// 修改学生详细信息
const handleUpdate = () => {
  console.log("修改");
};
// 导出学生信息表格
const handleExport = () => {
  const result = _export_dangan(base_info);
  _export_dangan(per_entity.value, result, base_info.value.name + ".xlsx");
};

// 关闭学生信息返回班级页面
const handleClose = () => {
  proxy.$tab.closePage(route).then((res) => {
    router.back()
  });
};

// 获取学生档案课程表信息
const getStuTable = () => {
  stuTable(route.query.user_id).then(res => {
    console.log(res);


    const transformedArray = res.map(item => {
      const stat = item.stat;
      let f_avg_fraction = 0;
      let final_score = 0;

      if (stat.length > 0) {
        const t0Stat = stat.find(s => s.t === 0);
        const t1Stat = stat.find(s => s.t === 1);

        if (t0Stat) f_avg_fraction = parseFloat(t0Stat.avg_fraction).toFixed(2);
        if (t1Stat && t1Stat.final_score !== null) final_score = t1Stat.final_score;
      }

      return {
        ...item,
        f_avg_fraction: f_avg_fraction.toString(),
        final_score: final_score.toString()
      };
    });


   
    per_entity.value=transformedArray
    per_entity.value.forEach(e=>{

      e.create_time=_formatTimestamp(e.create_time)
    })

    console.log(per_entity.value);
    
    

  })

}



onMounted(() => {
  getStuDetail();
  getStuTable()

})
</script>

<style lang="scss" scoped>
.studentDetail {
  margin-top: 30px;
  

  .studentInfo {
    min-width: 1200px;
   
    .header {
      margin: 40px 0;
      
    }

    .avatar {
      display: flex;

      .right {
        margin-left: 25px;
  
        padding-top: 20px;
        h2 {
          font-weight: 900;
          color: #333;
          margin-bottom: 13px;
        }

        p {
          color: #999;
          font-weight: 500;
          font-size: 14px;
          margin-bottom: 15px;

          b {
            font-size: 16px;
            color: #333;
          }
        }
      }
    }

    .info {

      padding-top: 60px;
      height: 100%;

      p {
        color: #999;
        font-weight: 500;
        font-size: 14px;
        margin-bottom: 15px;

        b {
          font-size: 16px;
          color: #333;
        }
      }
    }
  }
}
</style>

<style>
.studentDetail .studentTable .el-table__row {
  height: 60px;
}
</style>
